<!-- https://ext.dcloud.net.cn/plugin?id=3597 -->
<template>
	<view>
		<uni-section class="pub-title" title="预览海报" type="line"></uni-section>
		<uni-card :isShadow="true">
			<image style="top:0px;width: 320px; height: 550px;" mode="scaleToFill" :src="haib"></image>
			<r-canvas ref="rCanvas"></r-canvas>
		</uni-card>

		<uni-section class="pub-title" title="海报模板" type="line"></uni-section>
		<carousel :img-list="imgList" url-key="itemValue" @selected="selectedBanner" />

		<button type="primary" size="default" class="btn-red margin15R margin10L" @click="shengchb">下载海报</button>
	</view>
</template>

<script>
	import rCanvas from "@/components/r-canvas/r-canvas.vue"
	import carousel from '@/components/vear-carousel/vear-carousel'

	export default {
		components: {
			rCanvas,
			carousel
		},
		data() {
			return {
				xiaocxewm: null,
				background: null,
				imgList: [],
				haib: null
			}
		},

		onReady() {
			let that = this

			if (!uni.getStorageSync("userInfo").myerm) {
				uni.request({
					url: getApp().globalData.serviceUrl + "/weixin/getUnlimited2Minio",
					data: {
						mobile: uni.getStorageSync("userInfo").phone
					},
					header: {
						"X-Access-Token": uni.getStorageSync("token")
					},
					dataType: 'json',
					method: 'GET',
					success: (result) => {
						if (result.data.success) {
							that.xiaocxewm = result.data.result
						}
					}
				});
			} else
				that.xiaocxewm = uni.getStorageSync("userInfo").myerm

			uni.request({
				url: getApp().globalData.serviceUrl + "/sys/dictItem/list",
				data: {
					dictId: "1482495432577347585",
				},
				dataType: 'json',
				method: 'GET',
				success: (result) => {
					if (result.data.success) {
						that.imgList = result.data.result.records
						that.background = that.imgList[0].itemValue
						that.genHaib()
					}
				}
			})

		},

		methods: {
			genHaib() {
				this.$nextTick(async () => {
					uni.showLoading({
						title: "生成海报中..."
					})
					// 初始化
					await this.$refs.rCanvas.init({
						canvas_id: "rCanvas",
						hidden: true,
						canvas_width: 1242,
						canvas_height: 2208
					})

					// 画图
					await this.$refs.rCanvas.drawImage({
						url: this.background,
						x: 0,
						y: 0,
						w: 1242,
						h: 2208
					}).catch(err_msg => {
						uni.showToast({
							title: err_msg,
							icon: "none"
						})
					})

					// 画二维码
					await this.$refs.rCanvas.drawImage({
						url: this.xiaocxewm,
						x: 470,
						y: 1850,
						w: 300,
						h: 300
					}).catch(err_msg => {
						uni.showToast({
							title: err_msg,
							icon: "none"
						})
					})

					// 画文字
					// await this.$refs.rCanvas.drawText({
					// 	text: "精选好物",
					// 	max_width: 0,
					// 	x: 38,
					// 	y: 590,
					// 	font_color: "rgb(175, 174, 175)",
					// 	font_size: 20
					// }).catch(err_msg => {
					// 	uni.showToast({
					// 		title: err_msg,
					// 		icon: "none"
					// 	})
					// })

					// 生成海报
					await this.$refs.rCanvas.draw((res) => {
						//res.tempFilePath：生成成功，返回base64图片
						this.haib = res.tempFilePath
						// 保存图片
						// this.$refs.rCanvas.saveImage(res.tempFilePath)
						uni.hideLoading()
					})
				})
			},

			selectedBanner(item, index) {
				this.background = item.itemValue
				this.genHaib()
			},

			// 暂时废弃
			downloadFile(url) {
				let that = this

				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success() {
						uni.downloadFile({
							url: url,
							success: (res) => {
								if (res.statusCode === 200) {
									// that.src = res.tempFilePath

									console.log('下载成功');
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath,
										success: function() {
											console.log('save success');
											uni.showToast({
												title: "已保存到相册"
											})
										},
										fail: function() {
											console.error(res)
										}

									});
								}
							},
							fail: (error) => {
								log.error(error)
							}
						})

					},
					fail(error) {
						uni.showModal({
							title: '提示',
							content: '是否打开授权界面',
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
									uni.openSetting({
										success(res) {
											console.log(res.authSetting)
										}
									});
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});

					}
				})
			},

			shengchb() {
				let that = this
				
				uni.getSetting({
					success(res) {
						if (!res.authSetting["scope.writePhotosAlbum"]) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {

								},
								fail: function(error) {
									console.log(error)
									uni.showModal({
										title: '提示',
										content: '请授权保存图片权限, 需要将海报图片保存到手机相册',
										success: function(res) {
											if (res.confirm) {
												console.log('用户点击确定');
												uni.openSetting({
													success(res) {
														console.log(res
															.authSetting)
													},
													fail: function(error2) {
														console.log(error2)
													}
												})
											} else if (res.cancel) {
												console.log('用户点击取消');
											}
										}
									})

								}
							})

						} else
							that.$refs.rCanvas.saveImage(that.haib)
					}
				})
			}
		}
	}
</script>

<style scoped>

</style>
